window.addEventListener("load", function() {
    var that;
    class Table {
        constructor(id) {
                that = this;
                this.table = document.querySelector(id);
                this.top = this.table.querySelector(".top");
                this.ul = this.top.querySelector("ul");

                this.text = this.table.querySelector(".text");

                this.add1 = this.top.querySelector("div");
                this.init();
            }
            //初始化元素绑定事件
        init() {
                this.upDateNode();
                this.add1.onclick = this.add;
                for (var i = 0; i < this.lis.length; i++) {
                    this.lis[i].index = i;
                    this.lis[i].onclick = this.toggle;
                    this.dela[i].onclick = this.del;
                    this.span[i].ondblclick = this.change1;
                    this.texts[i].ondblclick = this.change2;

                }
            }
            //动态获取元素
        upDateNode() {
                this.lis = this.ul.querySelectorAll("li");
                this.texts = this.text.querySelectorAll("div");
                this.dela = this.table.querySelectorAll("em");
                this.span = this.table.querySelectorAll("span");
            }
            //切换
        toggle() {
                that.clear1();
                this.className = "liclick";
                that.texts[this.index].className = "textclick";
            }
            //排他 清除样式
        clear1() {
            for (var i = 0; i < this.lis.length; i++) {
                this.lis[i].className = "";
                this.texts[i].className = '';

            }
        }

        //增
        add() {
                that.clear1();
                var random = Math.random();
                var li = '<li class="liclick"> <span>新选项卡</span> <em>x</em></li>';
                var text = '<div class="textclick">测试' + random + '</div>';
                // (2) 把这两个元素追加到对应的父元素里面
                that.ul.insertAdjacentHTML('beforeend', li);
                that.text.insertAdjacentHTML('beforeend', text);
                that.init();

            }
            //删
        del(e) {
                e.stopPropagation();
                var index = this.parentNode.index;
                this.parentNode.remove();
                that.texts[index].remove();
                that.init();


                //当我们删除处于选中状态的li时，其余的不需要处于选中状态
                // if (this.parentNode.className === 'liclick') return;
                if (document.querySelector('.liclick')) {
                    return;
                }
                //当我们删除一个选中状态的li时，使前一个li处于选中状态
                index--;
                that.lis[index] && that.lis[index].click();

            }
            //改   双击修改内容    把双击选中内容修改掉  换成text框
        change1() {
            // 双击禁止选定文字

            var text = this.innerHTML;

            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            this.innerHTML = '<input type="text" name="" id="" value=' + text + '>';
            var input = this.children[0];
            input.select();


            input.onblur = function() {
                    var i = this.value.length;
                    if (i == 0 || i >= 5) {
                        this.className = 'inputerro';
                        alert('您输入的字数过多 请输入5位汉字以下 ');
                    } else {
                        this.parentNode.innerHTML = this.value;
                        // console.log(this.value.length);
                    }

                }
                //按下回车键 input赋值回去
            input.onkeyup = function(e) {
                if (e.keyCode == 13) {
                    this.parentNode.innerHTML = this.value;
                }
            }
        }
        change2() {
            var str = this.innerHTML;
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            this.innerHTML = '<input type="text" name="" id="" value=' + str + ' style=" display:block; width: 600px; height: 300px; font-size: 20px;">';
            var input = this.children[0];
            input.select();
            input.onblur = function() {

                this.parentNode.innerHTML = this.value;
                // console.log(this.value.length);

            }
            input.onkeyup = function(e) {
                if (e.keyCode == 13) {
                    this.parentNode.innerHTML = this.value;
                }
            }
        }
    }
    new Table("#box");
});